<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Serial Port Communication</title>
	</head>
	<body>
		<button onclick="connectSerial()">Connect to Serial Port</button>
		<textarea id="serialData" rows="10" cols="40"></textarea>
		<video id="videoPlayer" width="640" height="360" controls>
			Your browser does not support the video tag.
		</video>

		<script>
			let videoPlayer = document.getElementById('videoPlayer');
			let nextVideoSource = '';

			async function connectSerial() {
				try {
					const port = await navigator.serial.requestPort();
					await port.open({
						baudRate: 9600
					});

					// 添加监听器以接收串口数据
					const reader = port.readable.getReader();
					while (true) {
						const {
							value,
							done
						} = await reader.read();
						if (done) {
							break;
						}

						const receivedData = new TextDecoder().decode(value);
						document.getElementById('serialData').value += receivedData;

						// 根据接收到的数据切换视频
						switch (receivedData.trim()) {
							case '1':
								preloadAndPlayVideo('1.mp4');
								break;
							case '2':
								preloadAndPlayVideo('2.mp4');
								break;
							case '3':
								preloadAndPlayVideo('3.mp4');
								break;
							case '4':
								preloadAndPlayVideo('4.mp4');
								break;
							case '5':
								preloadAndPlayVideo('5.mp4');
								break;
							case '6':
								preloadAndPlayVideo('6.mp4');
								break;
							case '7':
								preloadAndPlayVideo('7.mp4');
								break;
							case '8':
								preloadAndPlayVideo('8.mp4');
								break;
							case '9':
								preloadAndPlayVideo('9.mp4');
								break;
							case '10':
								preloadAndPlayVideo('10.mp4');
								break;
							case '11':
								preloadAndPlayVideo('11.mp4');
								break;
							case '12':
								preloadAndPlayVideo('12.mp4');
								break;
							case '13':
								preloadAndPlayVideo('13.mp4');
								break;
							case '14':
								preloadAndPlayVideo('14.mp4');
								break;
							case '15':
								preloadAndPlayVideo('15.mp4');
								break;
							case '16':
								preloadAndPlayVideo('16.mp4');
								break;


								// Add more cases for other videos if needed
						}
					}
				} catch (error) {
					console.error('Error connecting to serial port:', error);
				}
			}

			function preloadAndPlayVideo(videoSource) {
				if (videoPlayer.src.includes(videoSource)) {
					// 如果视频已经在播放，则不需要切换
					return;
				}
				nextVideoSource = videoSource;

				// 预加载新视频
				let tempVideo = document.createElement('video');
				tempVideo.src = videoSource;
				tempVideo.preload = 'auto';
				tempVideo.onloadeddata = () => {
					// 更改视频源并播放
					videoPlayer.src = nextVideoSource;
					videoPlayer.loop = true; // 设置循环播放
					videoPlayer.play();

					// 进入全屏模式
					if (videoPlayer.requestFullscreen) {
						videoPlayer.requestFullscreen();
					} else if (videoPlayer.mozRequestFullScreen) { // Firefox
						videoPlayer.mozRequestFullScreen();
					} else if (videoPlayer.webkitRequestFullscreen) { // Chrome, Safari and Opera
						videoPlayer.webkitRequestFullscreen();
					} else if (videoPlayer.msRequestFullscreen) { // IE/Edge
						videoPlayer.msRequestFullscreen();
					}
				};
			}
		</script>
	</body>
</html>